<template>
  <div class="hello">
    <div class="logo">
      <div class="container">
        <div class>
          <div class="col-1">
            <a href="/geren">
              <img src="../assets/logo.png" alt />
            </a>
          </div>
          <div class="col-2">
            <a href>
              <img src="../assets/logo.png" alt />
            </a>
            <h1>登录/注册</h1>
            <div class="quanbu">
              <div class="xianshi">
                <el-input v-model="input" placeholder="用户名" @keyup.enter.native="open4"></el-input>
              </div>
              <div class="xianshi-1" v-show="del">
                <el-input
                  placeholder="请输入密码"
                  v-model="poss"
                  show-password
                  @keyup.enter.native="open"
                ></el-input>
              </div>
              <div class="youbian" v-show="de">
                <el-button :plain="true" @click="open4">下一步</el-button>
              </div>
              <div class="youbian-1" v-show="del">
                <el-button :plain="true" @click="open">登录/注册</el-button>
              </div>
            </div>

            <div class="zuobian">
              <p>
                没有账号？
                <br />直接下一步登录即可自动为您注册一个
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      input: "",
      poss: "",
      del: false,
      pan: "",
      de: true
    };
  },
  methods: {
    open4() {
      if (this.input != "") {
        this.del = true;
        this.de = false;
      } else {
        this.$message.error("请输入用户名");
      }
    },
    open() {
      var f=this;
      if (this.poss == "") {
        this.$message.error("请输入密码");
      } else {
        this.$axios
          .get(
            "http://api.sbsh.me/index/users/login/user/" +
              this.input +
              "/password/" +
              this.poss
          )
          .then(res => {
            console.log(res.data.message);
            this.pan = res.data.message;
            localStorage.setItem("token", res.data.token);
            console.log(this.pan);
            if (this.pan == "登录成功") {
              this.$message({
                message: "登录成功",
                type: "success"
              });
              this.$router.push("/yemian");
              setTimeout(function() {
                f.$router.go(0);
              }, 700);
            } else if (this.pan == "账号或密码错误") {
              this.$message.error("账号或密码错误");
            }
          });
      }
    }
  }
};
</script>


<style scoped>
.container {
  width: 500px;
  margin: auto;
}
.col-1 img {
  width: 30px;
  display: block;
  margin: aut;
}
.col-2 img {
  width: 100px;
}
.youbian {
  text-align: right;
}
.zuobian {
  text-align: left;
}
.xianshi {
  margin-bottom: 10px;
}
.youbian-1 {
  margin-top: 20px;
}
</style>
